<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>管理员登录</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      overflow-x: hidden;
      background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
      position: relative;
    }
    
    /* 动漫风格背景 */
    .anime-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      overflow: hidden;
    }
    
    .cloud {
      position: absolute;
      background: white;
      border-radius: 100px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .cloud:before,
    .cloud:after {
      content: '';
      position: absolute;
      background: white;
      border-radius: 50%;
    }
    
    .cloud:before {
      width: 50px;
      height: 50px;
      top: -25px;
      left: 25px;
    }
    
    .cloud:after {
      width: 75px;
      height: 75px;
      top: -35px;
      right: 25px;
    }
    
    .cloud1 {
      width: 150px;
      height: 50px;
      top: 20%;
      left: 10%;
      animation: moveCloud 25s linear infinite;
    }
    
    .cloud2 {
      width: 200px;
      height: 60px;
      top: 40%;
      right: 10%;
      animation: moveCloud 30s linear infinite reverse;
    }
    
    .cloud3 {
      width: 120px;
      height: 40px;
      top: 70%;
      left: 20%;
      animation: moveCloud 20s linear infinite;
    }
    
    @keyframes moveCloud {
      0% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(100px);
      }
      100% {
        transform: translateX(0);
      }
    }
    
    .mountain {
      position: absolute;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 150px solid transparent;
      border-right: 150px solid transparent;
      border-bottom: 200px solid #81c784;
      z-index: -1;
    }
    
    .mountain1 {
      left: 10%;
      border-bottom: 180px solid #66bb6a;
      transform: scale(0.8);
    }
    
    .mountain2 {
      left: 30%;
      border-bottom: 220px solid #4caf50;
      transform: scale(1.1);
    }
    
    .mountain3 {
      left: 50%;
      border-bottom: 200px solid #43a047;
      transform: scale(0.9);
    }
    
    .mountain4 {
      left: 70%;
      border-bottom: 190px solid #388e3c;
      transform: scale(0.95);
    }
    
    .sun {
      position: absolute;
      top: 15%;
      right: 15%;
      width: 80px;
      height: 80px;
      background: #ffeb3b;
      border-radius: 50%;
      box-shadow: 0 0 50px #ffeb3b, 0 0 100px #ffeb3b;
      animation: rotateSun 20s linear infinite;
    }
    
    @keyframes rotateSun {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    
    .login-container {
      width: 100%;
      max-width: 400px;
      background: rgba(255, 255, 255, 0.92);
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
      backdrop-filter: blur(5px);
      border: 1px solid rgba(255, 255, 255, 0.5);
      transform: translateY(0);
      transition: transform 0.3s ease;
    }
    
    .login-container:hover {
      transform: translateY(-5px);
    }
    
    .anime-character {
      text-align: center;
      margin-bottom: 20px;
      position: relative;
    }
    
    .anime-character::before {
      content: "👨‍💻";
      font-size: 80px;
      display: block;
      text-align: center;
      margin-bottom: 10px;
      filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
    }
    
    .title {
      text-align: center;
      margin-bottom: 25px;
      color: #6c5ce7;
      position: relative;
    }
    
    .title h2 {
      font-weight: 700;
      font-size: 28px;
      margin-bottom: 5px;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .title::after {
      content: "";
      position: absolute;
      width: 60px;
      height: 4px;
      background: linear-gradient(to right, #6c5ce7, #a29bfe);
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 2px;
    }
    
    .tab-box {
      display: flex;
      background: #f1f2f6;
      border-radius: 10px;
      padding: 5px;
      margin-bottom: 20px;
    }
    
    .tab-span {
      flex: 1;
      text-align: center;
      padding: 10px;
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.3s ease;
      font-weight: 600;
      color: #636e72;
    }
    
    .tab-span.active {
      background: #6c5ce7;
      color: white;
      box-shadow: 0 4px 10px rgba(108, 92, 231, 0.4);
    }
    
    .form-group {
      margin-bottom: 20px;
      position: relative;
    }
    
    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: #2d3436;
    }
    
    .form-control {
      width: 100%;
      padding: 15px;
      border: 2px solid #dfe6e9;
      border-radius: 10px;
      transition: all 0.3s ease;
      font-size: 16px;
    }
    
    .form-control:focus {
      border-color: #6c5ce7;
      box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
    }
    
    .code-box {
      display: flex;
      gap: 10px;
    }
    
    .code-box .form-control {
      flex: 1;
    }
    
    #getVerificationCode {
      white-space: nowrap;
      padding: 15px;
      border-radius: 10px;
      background: #00b894;
      border: none;
      color: white;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    #getVerificationCode:hover {
      background: #00a885;
      transform: translateY(-2px);
    }
    
    .login-btn {
      width: 100%;
      padding: 15px;
      background: linear-gradient(to right, #6c5ce7, #a29bfe);
      border: none;
      border-radius: 10px;
      color: white;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
    }
    
    .login-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 7px 20px rgba(108, 92, 231, 0.6);
    }
    
    .error {
      color: #e84118;
      font-size: 14px;
      margin-top: 10px;
      min-height: 20px;
      text-align: center;
    }
    
    .register-link {
      text-align: center;
      margin-top: 20px;
      color: #636e72;
    }
    
    .register-link a {
      color: #6c5ce7;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
    }
    
    .register-link a:hover {
      color: #a29bfe;
      text-decoration: underline;
    }
    
    .anime-decoration {
      position: absolute;
      font-size: 24px;
      opacity: 0.8;
      z-index: 1;
    }
    
    .dec-1 {
      top: 10%;
      right: 10%;
      animation: bounce 2s infinite ease-in-out;
    }
    
    .dec-2 {
      bottom: 15%;
      left: 10%;
      animation: bounce 2s infinite ease-in-out reverse;
      animation-delay: 0.5s;
    }
    
    .dec-3 {
      top: 25%;
      left: 15%;
      font-size: 32px;
      animation: float 6s infinite ease-in-out;
    }
    
    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-10px);
      }
    }
    
    @keyframes float {
      0%, 100% {
        transform: translateY(0) rotate(0deg);
      }
      50% {
        transform: translateY(-15px) rotate(5deg);
      }
    }
    
    @media (max-width: 576px) {
      .login-container {
        padding: 20px;
      }
      
      .code-box {
        flex-direction: column;
      }
      
      .anime-character::before {
        font-size: 60px;
      }
      
      .title h2 {
        font-size: 24px;
      }
      
      .sun {
        width: 60px;
        height: 60px;
        right: 10%;
      }
    }
  </style>
</head>

<body>
  <!-- 动漫风格背景 -->
  <div class="anime-background">
    <div class="sun"></div>
    <div class="cloud cloud1"></div>
    <div class="cloud cloud2"></div>
    <div class="cloud cloud3"></div>
    <div class="mountain mountain1"></div>
    <div class="mountain mountain2"></div>
    <div class="mountain mountain3"></div>
    <div class="mountain mountain4"></div>
  </div>
  
  <!-- 装饰元素 -->
  <div class="anime-decoration dec-1">🌸</div>
  <div class="anime-decoration dec-2">🐱</div>
  <div class="anime-decoration dec-3">✨</div>
  
  <!-- 登录框 -->
  <div class="login-container">
    <div class="anime-character">
      <div class="title">
        <h2>管理员登录</h2>
        <p>欢迎回来，请登录您的账户</p>
      </div>
    </div>
    
    <div class="tab-box">
      <span class="active tab-span" data-form="loginForm">密码登录</span>
      <span class="tab-span" data-form="codeForm">验证码登录</span>
    </div>
    
    <form id="loginForm">
      <div class="form-group">
        <label for="loginName">邮箱</label>
        <input class="form-control" type="text" id="loginName" name="loginName" required placeholder="请输入邮箱">
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input class="form-control" type="password" id="password" name="password" required placeholder="请输入密码">
      </div>
      <button type="submit" class="login-btn">登录</button>
      <div class="error"></div>
    </form>
    
    <!-- 验证码登录框 -->
    <form id="codeForm" style="display: none;">
      <div class="form-group">
        <label for="loginEmail">邮箱</label>
        <input class="form-control" type="text" id="loginEmail" name="loginEmail" required placeholder="请输入邮箱">
      </div>
      <div class="form-group">
        <label for="verificationCode">验证码</label>
        <div class="code-box">
          <input class="form-control" type="text" id="verificationCode" name="verificationCode" required placeholder="请输入验证码">
          <div class="btn" id="getVerificationCode">获取验证码</div>
        </div>
      </div>
      <button type="submit" class="login-btn">登录</button>
      <div class="error"></div>
    </form>
    
    <div class="register-link">
      还没有账号？<a href="register.html?admin=true">立即注册</a>
    </div>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script>
    $(document).ready(function() {
      // 密码登录表单验证
      $("#loginForm").validate({
        rules: {
          loginName: "required",
          password: {
            required: true,
            minlength: 6
          }
        },
        messages: {
          loginName: "请输入您的邮箱",
          password: {
            required: "请输入密码",
            minlength: "密码长度至少为6个字符"
          }
        },
        submitHandler: function(form) {
          var loginName = $('#loginName').val();
          var password = $('#password').val();
          // 清除之前的错误消息
          $('.error').text('');
          // 发送AJAX请求
          $.ajax({
            url: '/user/password/login',
            type: 'post',
            contentType: 'application/json',
            data: JSON.stringify({
              loginName: loginName,
              password: password,
              mandatoryIdentity: "ADMIN"
            }),
            success: function(result) {
              if (result.code != 200) {
                alert("登录失败！" + result.message);
              } else {
                localStorage.setItem("user_token", result.data.token);
                localStorage.setItem("user_identity", "ADMIN");
                location.assign("admin2.html");
              }
            },
            error: function(xhr, status, error) {
              alert("登录请求失败，请稍后重试");
            }
          });
          return false; // 阻止表单的默认提交行为
        }
      });

      // 验证码登录表单验证
      $("#codeForm").validate({
        rules: {
          loginEmail: "required",
          verificationCode: "required",
        },
        messages: {
          loginEmail: "请输入您的邮箱",
          verificationCode: "请输入验证码",
        },
        submitHandler: function(form) {
          var loginEmail = $('#loginEmail').val();
          var verificationCode = $('#verificationCode').val();
          // 清除之前的错误消息
          $('.error').text('');
          // 发送AJAX请求
          $.ajax({
            url: '/user/message/login',
            type: 'post',
            contentType: 'application/json',
            data: JSON.stringify({
              loginEmail: loginEmail,
              verifyCode: verificationCode,
              mandatoryIdentity: "ADMIN"
            }),
            success: function(result) {
              if (result.code != 200) {
                alert("登录失败！" + result.message);
              } else {
                localStorage.setItem("user_token", result.data.token);
                localStorage.setItem("user_identity", "ADMIN");
                location.assign("admin2.html");
              }
            },
            error: function(xhr, status, error) {
              alert("登录请求失败，请稍后重试");
            }
          });
          return false; // 阻止表单的默认提交行为
        }
      });

      // tab切换
      $('.tab-box span').click(function(e) {
        let formId = '#' + $(this).data('form');
        $(this).addClass('active').siblings().removeClass('active');
        $('form').hide();
        $(formId).show();
      });

      // 获取验证码
      var timer = null;
      $('#getVerificationCode').click(function(e) {
        var txt = $(this).text();
        var num = 120;
        if (txt.indexOf('获取') !== -1) {
          $('#getVerificationCode').text(num + 's');
          getCode();
          // 获取验证码接口
          timer && clearInterval(timer);
          timer = setInterval(function() {
            if (num > 1) {
              num--;
              $('#getVerificationCode').text(num + 's');
            } else {
              timer && clearInterval(timer);
              $('#getVerificationCode').text('重新获取');
            }
          }, 1000);
        }
      });

      function getCode() {
        $.ajax({
          url: '/user/verification',
          type: 'GET',
          data: {
            email: $('#loginEmail').val()
          },
          success: function(result) {
            console.log(result.code);
            if (result.code != 200) {
              timer && clearInterval(timer);
              $('#getVerificationCode').text('重新获取');
              alert('验证码获取失败');
            } else {
              alert('验证码发送成功');
            }
          },
          error: function(xhr, status, error) {
            timer && clearInterval(timer);
            $('#getVerificationCode').text('重新获取');
            alert('验证码获取失败，请稍后重试');
          }
        });
      }
    });
  </script>
</body>
</html>